<template>
	<view>
		<u-icon class="send-icon" ref="uIcong" color="rgba(255, 87, 51, 1)" name='plus-square-fill' size="60"
			@click.native.stop="changePopupState">
		</u-icon>
		<view :class="popupState?'showPopup':'closePopup'" @touchstart="closePopup"></view>
		<view class="pupop" v-if="popupState">
			<view class="pupopo-button" @click="sendNeed">
				<my-icon name="my_book" title="我要买" mode="right" size="48"></my-icon>
			</view>
			<u-line color="rgb(56, 56, 56)" />
			<view class="pupopo-button" @click="sendGoods">
				<my-icon name="my_flay" title="我要卖" mode="right" size="48"></my-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import myIcon from "components/common/myIcon"
	export default {
		name: "sendComponent",
		components:{myIcon},
		data() {
			return {
				popupState: false
			}
		},
		methods: {
			sendNeed() {
				this.closePopup()
				this.pushNewPage("sends_need")
			},
			sendGoods() {
				this.closePopup()
				this.pushNewPage("sends_goods")
			},
			changePopupState() {
				this.popupState = !this.popupState
			},
			closePopup(){
				this.popupState = false
			}
		}
	}
</script>

<style scoped>
	/* pupop顶部弹窗 */
	.pupop {
		width: 180rpx;
		position: relative;
		top: 20rpx;
		right: 120rpx;
		z-index: 999;
		border-radius: 10rpx;
		overflow: hidden;
		min-height: 120rpx;
		background-color: rgba(255, 255, 255, 0.8);
		display: flex;
		flex-direction: column;
	}

	.pupopo-button {
		width: 100%;
		height: 70rpx;
		display: grid;
		place-content: center;
	}
	
	.showPopup{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 100;
	}
	.closePopup{
		display: none;
	}
</style>
